<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- jstl 标签 --%>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>${pageTitle}</title>
    <link rel="stylesheet" href="${rc.contextPath}/assets/login/findPassword/css/findpassword.css" type="text/css" />
	<script language="JavaScript">
		if (window != top){
			top.location.href = location.href;
		}
	</script>
</head>
<body>
<div id="login">
    <h1>美康生物</h1>
    <p class="title">医卫士云平台</p>
    <div class="user_info">
        <div class="info_hd">
            <span id="forgot">忘记密码&nbsp;&nbsp;&gt;&nbsp;&nbsp;填写账户信息</span>
        </div>
        <div class="info_ft">
            <div class="tab">
                <i></i>
                <ul>
                    <li><span>1.填写账户信息</span></li>
                    <li><span>2.验证身份</span></li>
                    <li><span>3.设置新密码</span></li>
                    <li><span class="finish">4.完成</span></li>
                </ul>
            </div>
            <div id="content">
                <ul>
                    <li class="Type">请选择找回方式：</li>
                    <li class="phoneNum">
                        <span>手机号码</span>
                        <input type="radio" name="findType" value="mobilphone" checked="checked"/>
                    </li>
                    <li class="Email">
                        <span>邮箱号码</span>
                        <input type="radio" name="findType" value="EmailNumber"/>
                    </li>
                    <li class="nextbtn">
                        <input type="button" class="next" value="下一步" />
                    </li>
                </ul>
            </div>
            <div id="phoneNumber">
                <ul>
                    <li class="Number">
                        <span>手机号码：</span>
                        <input type="text" class="numTxt" id="mobile" />
                        <p>云平台将发送手机动态码到此手机，请保持畅通</p>
                    </li>
                    <li class="DynamicCode">
                        <span>手机动态码：</span>
                        <input type="text" class="codeTxt" id="mobileVerifyCode"/>
                        <input type="button" class="get" id="sendVerifyCode" value="立即获取"/>
                    </li>
                    <li class="IdentifyCode">
                        <span>验证码：</span>
                        <input type="text" class="codeTxt" id="verifyCode_phone" />
                    </li>
                    <li class="code">输入图中的字符，不区分大小写</li>
                    <li class="identify">
                        <img id="phoneVerifyCode" src="${rc.contextPath}/home/verifyCode/get" />
                        <p onclick="changeImg('phoneVerifyCode')">看不清，请换一张</p>
                    </li>
                    <li class="Num_next">
                        <input type="button" class="prev" value="上一步" />
                        <input type="button" class="next" value="下一步" />
                    </li>
                </ul>

            </div>
            <div id="emailNumber">
                <ul>
                    <li class="Number">
                        <span>邮箱帐号：</span>
                        <input type="text" class="numTxt"/>
                        <p>云平台将发送邮箱动态码到此邮箱，请注意查收</p>
                    </li>
                    <li class="DynamicCode">
                        <span>邮箱动态码：</span>
                        <input type="text" class="codeTxt" />
                        <input type="button" class="get" value="立即获取"  style="text-align:center;" />
                    </li>
                    <li class="IdentifyCode">
                        <span>验证码：</span>
                        <input type="text" class="codeTxt" />
                    </li>
                    <li class="code">输入图中的字符，不区分大小写</li>
                    <li class="identify">
                        <img id="emailVerifyCode" src="${rc.contextPath}/home/verifyCode/get" />
                        <p onclick="changeImg('emailVerifyCode')">看不清，请换一张</p>
                    </li>
                    <li class="email_btn">
                        <input type="button" class="prev" value="上一步" />
                        <input type="button" class="next" value="下一步" />
                    </li>
                </ul>

            </div>
            <div id="newPasswordDiv">
                <ul>
                    <li class="newlogin">
                        <label>新登录密码：</label>
                        <input type="password" class="Txt" id="newPassword" />
                        <span>6-16位字符，必须包含数字和英文(区分大小写)。</span>
                    </li>
                    <li>
                        <label>确认新登录密码：</label>
                        <input type="password" class="Txt" id="newPasswordRedo" />
                    </li>
                    <li class="set_newbtn">
                        <input type="button" class="prev" value="上一步" />
                        <input type="button" class="next" value="下一步" />
                    </li>
                </ul>

            </div>
            <div id="finish">
                <div class="success">
                    <img src="${rc.contextPath}/assets/login/findPassword/img/finish.png"/>
                    <span>充值登录密码成功</span>
                </div>
                <p>您现在可以<a href="${ctx}/login">立即登录</a></p>
            </div>
        </div>
    </div>
</div>
<script src="${rc.contextPath}/assets/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="${rc.contextPath}/assets/login/findPassword/js/findpassword.js" type="text/javascript"></script>
<script type="text/javascript">

    var ajaxVerifyCodeResult = false;
    var ajaxResetByMobileResult = false;

    $(function () {
        $("#sendVerifyCode").click(function () {
            if(!(/^1\d{10}$/.test($("#mobile").val()))){
                alert("请填写正确的手机号码");
                $("#mobile")[0].focus();
                return false;
            }else{
                $.ajax({
                    url:'${ctx}/home/resetByMobile/verifyCode',
                    type:'post',
                    data:{mobile:$("#mobile").val()},
                    async : false, //默认为true 异步
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        if(!(data.success)){
                            alert(data.msg);//失败
                        }else{
                            waitTime($("#sendVerifyCode"), 60);
                        }
                    }
                });
            }
        });

        /**
         * 获取验证码后，等待60秒
         * */
        function waitTime(o, wait) {//o为按钮的对象，wait为等待时间（秒）
            if (wait == 0) {
                o.removeAttr("disabled");
                o.val("立即获取");//改变按钮中value的值
            } else {
                o.attr("disabled", true);//倒计时过程中禁止点击按钮
                o.val(wait + "秒");//改变按钮中value的值
                wait--;
                setTimeout(function () {
                            waitTime(o, wait);//循环调用
                        },
                        1000);
            }
        }
    });

    /**
     * 重新获取验证码
     * */
    function changeImg(id){
        var src = $("#"+id).attr("src");
        $("#"+id).attr("src",chgUrl(src));
    }

    /**
     * 设置验证码url地址（添加时间戳）
     * */
    function chgUrl(url) {
        var timestamp = (new Date()).valueOf();
        if (url.indexOf("?") >= 0) {
            if (url.indexOf("timestamp=") >= 0) {
                var urlArr = url.split("timestamp=");
                var i;
                var rearUrl = "";
                if (i = urlArr[1].indexOf("&") >= 0) {
                    rearUrl = urlArr[1].substring(i, urlArr[1].length);
                }
                url = urlArr[0] + "timestamp=" + timestamp + rearUrl;
            } else {
                url = url + "&timestamp=" + timestamp;
            }
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }

    /**
     * ajax验证 验证码和手机动态码是否正确
     * */
    function ajaxVerifyCode(){
        $.ajax({
            url:'${ctx}/home/resetByMobileValidate',
            type:'post',
            data: {
                mobile: $("#mobile").val(),
                mobileVerifyCode: $("#mobileVerifyCode").val(),
                verifyCode: $("#verifyCode_phone").val()
            },
            async : false, //默认为true 异步
            error:function(){
                alert('error');
                ajaxVerifyCodeResult = false;
            },
            success:function(data){
                if(!(data.success)){
                    if(data.error=="expired_mobile_code"){
                        alert(data.msg);//手机动态码过期
                        $("#mobileVerifyCode")[0].focus();
                        //提示是否重新获取
                    }else if(data.error=="error_verify_code"){
                        alert(data.msg);//验证码错误
                        $("#verifyCode_phone")[0].focus();
                    }else{
                        alert(data.msg);
                        $("#mobileVerifyCode")[0].focus();
                    }
                    ajaxVerifyCodeResult = false;
                }else{
                    ajaxVerifyCodeResult = true;
                }
            }
        });
    }

    /**
     * ajax 根据手机号码修改密码
     * */
    function ajaxResetByMobile(){
        $.ajax({
            url:'${ctx}/home/resetByMobile',
            type:'post',
            data: {
                mobile: $("#mobile").val(),
                newPassword: $("#newPassword").val()
            },
            async : false, //默认为true 异步
            error:function(){
                alert('error');
                ajaxResetByMobileResult = false;
            },
            success:function(data){
                if(!(data.success)){
                    alert(data.msg);
                    ajaxResetByMobileResult = false;
                }else{
                    ajaxResetByMobileResult = true;
                }
            }
        });
    }

</script>
</body>
</html>